<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
      .active {
        background-color: red;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div>
        <button
          v-for="item in 5"
          :class="{active:pageInfo.currentPage===item}"
          @click="pageInfo.currentPage=item"
        >
          {{item}}
        </button>
        <select v-model="pageInfo.limit">
          <option :value="3">每页3条</option>
          <option :value="6">每页6条</option>
          <option :value="9">每页9条</option>
          <option :value="12">每页12条</option>
        </select>
      </div>
    </div>
    <script>
      Vue.config.productionTip = false;
      /* 
      一旦要侦听数据,如果目的是得到一个值,则选择计算属性,其他就选择watch(计算属性能做的watch都可以,但是watch能做的计算属性不一定)
    
    */
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            pageInfo: {
              //当前页是1
              currentPage: 1,
              //每页条数:3
              limit: 3,
            },
          };
        },
        methods: {
          //获取数据的函数
          getData() {
            console.log("重新获取数据");
          },
        },
        watch: {
          //一旦pageInfo改变,则重新发送请求
          //watch的侦听,默认只能侦听当前的值是否被替换,内部的修改是侦听不到的
          /* pageInfo() {
            this.getData();
          }, */

          //完整的watch配置如下
          pageInfo: {
            //开启深度监听,就可以监听对象内部的修改
            deep: true,
            //当侦听到以后的回调函数
            handler() {
              // console.log("修改");
              this.getData();
            },
          },
        },
      });
    </script>
  </body>
</html>
